<template>
	<view class="content">
		<!-- <nav-bar></nav-bar> -->
		<view class="positionBtn">
			<button @click="handleLang('English')" class="lang" v-if="'en' === lang">
				繁體中文
			</button>
			<button @click="handleLang('繁體中文')" class="lang" v-else>
				English
			</button>
		</view>
		<view class="main">
			<image src=" @/assets/login/loginIcon.png" class="imgIcon"></image>
			<view class="welcome">
				{{ $t('歡迎您來到流量方舟') }}
			</view>
			<view class="text">
				{{ $t('請輸入郵箱號或手機號，密碼進行登錄') }}
			</view>
			<view class="contentList">
				<h-input v-if="cutNum" :name="$t('郵箱號')" @myInp="customHandler">
					<template v-slot:left>
						<image src="../../assets/login/leftEmil.png" class="inpIcon"></image>
					</template>
					<template v-slot:right>
						<view @click="changeCutNum(false)" style="color:#636897 ; float: right;font-size: 22rpx;"
							class="cut">
							{{ $t('切換手機號') }}
						</view>
					</template>
				</h-input>
				<h-input v-else iptType="number" :name="$t('手機號')" @myInp="changePhone">
					<template v-slot:left>
						<image src="../../assets/login/phone.png" class="inpIcon"></image>
					</template>
					<template v-slot:right>
						<view @click="changeCutNum(true)" style="color:#636897 ; float: right;font-size: 22rpx;"
							class="cut">
							{{ $t('切換郵箱號') }}
						</view>
					</template>
				</h-input>
				<h-input :iptType='isShow' :name="$t('密碼')" :placeholder="$t('請輸入您的密碼')" @myInp="customHandlerPass">
					<template v-slot:left>
						<image src="../../assets/login/pass.png" class="inpIcon"></image>
					</template>
					<template v-slot:right>
						<image @click="cutType('password')" v-if="isShow === 'text'" src="../../assets/login/zy.png"
							class="inpIcon">
						</image>
						<image @click="cutType('text')" v-else src="@/assets/myFlow/biyan.png" class="inpIcon"></image>
					</template>
				</h-input>
			</view>
			<view class="leftRightBtn">
				<view class="leftBtn" @click="jumpMima">
					{{ $t('忘記密碼') }}
				</view>
				<view class="leftBtn" @click="jumpZc">
					{{ $t('沒有賬號，去注冊') }}
				</view>
			</view>
			<view class="btn-sub" @click="handleLogin">
				{{ $t('登錄') }}
			</view>
		</view>
		<!-- <popUptips zdTit='确认取消' :zdTxt='zdTxt' :isSHow='isSHow' @colseBtn='colseBtn' @zdBtn="zdBtn"></popUptips> -->
	</view>
</template>

<script setup>
import i18n from '@/locale/index'
import {
	jump
} from '@/utils/common.js'
import {
	ShowToast
} from '@/utils/check.js'
import {
	ScanCode
} from '@/utils/check.js'
import HInput from '@/components/h-input.vue'
import loginRequest from '@/hooks/login.js'
import {
	onMounted,
	ref,
	reactive,
	getCurrentInstance,
} from 'vue'
import {
	useI18n
} from 'vue-i18n'
const {
	t
} = useI18n()
const {
	ctx
} = getCurrentInstance()
import {
	store
} from '@/store'
const cutNum = ref(true)
const range = reactive([{
	value: 'en',
	text: 'English'
}, {
	value: 'zh-Hant',
	text: '繁體中文'
}])
const {
	list,
	details,
	page,
	size,
	sumComputed,
	getLoginAction
} = loginRequest()
let loginList = reactive({
	userName: '',
	passWord: '',
	phone: ''
})
import {
	onLoad,
	onShow
} from "@dcloudio/uni-app"
let isShow = ref('password') //是否睁眼
let lang = ref('')
const getLogin = async () => {
	const data = await getLoginAction('user/login', loginList)
	const {
		list,
		details,
		page,
		size,
		sumComputed,
		getLoginAction
	} = loginRequest()
	let loginList = reactive({
		userName: '',
		passWord: '',
		phone: ''
	})
	uni.setStorage({
		key: 'setUserInfo',
		data
	})
	uni.redirectTo({
		url: '/pages/index/index'
	});
}
onLoad(() => {

	getLang()
})
const jumpZc = (item) => {
	// jump({
	// 	path: 'index'
	// })
	uni.navigateTo({
		url: "/pages/signUp/signUp",
		animationType: "fade-in",
		animationDuration: 200,
	});
}
const jumpMima = (item) => {
	// jump({
	// 	path: 'index'
	// })
	uni.navigateTo({
		url: "/pages/forgotPassword/forgotPassword",
		animationType: "fade-in",
		animationDuration: 200,
	});
}
const login = (item) => {
	// jump({
	// 	path: 'index'
	// })
	uni.navigateTo({
		url: "/pages/index/index",
		animationType: "fade-in",
		animationDuration: 200,
	});
}
// const codeLang = () => {
// 	lang.value = uni.getLocale()
// }
// codeLang()
const password = (item) => {
	uni.navigateTo({
		url: "/pages/forgotPassword/forgotPassword",
		animationType: "fade-in",
		animationDuration: 200,
	});
	// jump({
	// 	path: 'forgotPassword'
	// })
}
// const getLang = () => {
// 	lang.value = uni.getLocale()
// 	// lang.value = uni.getStorageSync('lang')
// }
// const changeLang = (lang) => {
// 	uni.setLocale(lang)
// 	// uni.setStorageSync('lang', lang)
// 	ctx.$i18n.locale = lang
// 	getLang()
// }
const getLang = () => {

	// lang.value = uni.getLocale()
	// if (uni.getStorageSync() == 'zh-Hant') {
	// 	uni.setStorageSync('lang', 'zh-Hant')
	// 	lang.value = 'zh-Hant'
	// } else {
	// 	uni.setStorageSync('lang', 'en')
	// 	lang.value = 'en'
	// }
	lang.value = uni.getStorageSync('lang')
	// lang.value = uni.getStorageSync('lang')
}
const handleLang = async (val) => {

	uni.getStorageSync('lang') === 'en' ? uni.setStorageSync('lang', 'zh-Hant') : uni.setStorageSync(
		'lang', 'en')
	lang.value = uni.getStorageSync('lang')
	ctx.$i18n.locale = lang.value
	// if(val == 'English'){
	// 	uni.setLocale('zh-Hant')
	// 	ctx.$i18n.locale = val
	// 	getLang()
	// 	// #ifdef H5
	// 	 window.location.reload();
	// 	// #endif
	// }else{
	// 	uni.setLocale('en')
	// 	// lang.value = 'en'
	// 	ctx.$i18n.locale = val
	// 	getLang
	// // #ifdef H5
	// 	 window.location.reload();
	// // #endif	
	// }
}
//饿饿饿邮箱 早知道 用循环了 2个 好麻烦  懒得改  啊啊啊 i18n好麻烦 自动生成英文插件不会改了  换成配置文件的话 又得手动中英文
const customHandler = (val) => {
	loginList.userName = val
}

//手机号
function changePhone(val) {
	loginList.phone = val
}
//密码
const customHandlerPass = (val) => {
	loginList.passWord = val
}
const handleLogin = async (e) => {
	if (cutNum.value) {
		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
		if (!loginList.userName || !loginList.passWord) return ShowToast(`${i18n.global.t('郵箱號和密碼不能爲空')}`)
		//校验函数
		function endsWithEmail(str) {
			return emailRegex.test(str);
		}
		if (!endsWithEmail(loginList.userName)) return ShowToast(`${i18n.global.t('請輸入正確的郵箱格式')}`)
	} else {
		if (!loginList.phone || !loginList.passWord) return ShowToast(`${i18n.global.t('手機號和密碼不能爲空')}`)
	}

	const data = await getLoginAction('user/login', {
		...loginList,
		registrationType: cutNum.value ? 0 : 1
	})
	const {
		token,
		...user
	} = data
	uni.setStorage({
		key: 'setToken',
		data: token
	})
	uni.setStorage({
		key: 'setUserInfo',
		data
	})
	uni.switchTab({
		url: '/pages/index/index'
	});
}
//修改input密码状态
function cutType(val) {
	isShow.value = val
}

function changeCutNum(val) {
	cutNum.value = val
	loginList.phone = ''
	loginList.userName = ''
}
</script>

<style lang="scss" scoped>
body {
	padding: 0;
}

.positionBtn {
	width: 100vw;
	min-height: 10rpx;
	color: #fff;

	.lang {
		margin-right: 30rpx;
		float: right;
		width: 230rpx;
		height: 70rpx;
		line-height: 70rpx;
		background-color: #2e2c3a;
		text-align: center;
		margin-top: 80rpx;
		color: #fff;
		z-index: 99999;
	}
}

.btnLang {
	color: #fff;
}

.num {
	font-size: 28rpx;
	color: #A99DFA;
	position: absolute;
	right: 80rpx;
}

.inpFousc {
	border: 2rpx solid red;
	border-radius: 10rpx;
	padding: 32rpx;
	font-size: 28rpx;
	color: #FFFFFF;
	display: block;
	width: 100%;
}

.inputName {
	font-size: 24rpx;
	color: #808492;
	line-height: 80rpx;
}

.main {
	padding: 25rpx;
	margin-top: 100rpx;
	width: 100%;
	box-sizing: border-box;

	.welcome {
		font-size: 42rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 42rpx;
		margin-top: 21rpx;
	}

	.text {
		margin-top: 21rpx;
		line-height: 24rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 300;
		// background: linear-gradient(to right, #7B65FF 0%, #FF78A8 50%);
		background-color: #848686;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.imgIcon {
		text-align: center;
		width: 210rpx;
		height: 140rpx;
		margin-top: 180rpx;
	}

	.btn-sub {
		margin-top: 30rpx;
		width: 640rpx;
		height: 90rpx;
		// background: linear-gradient(90deg, #5641DD, #B1A6FD);
		background: linear-gradient(90deg, #039BDA, #0DF2ED);
		border-radius: 45rpx;
		text-align: center;
		line-height: 90rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.contentList {
		width: 100%;
		padding-top: 38rpx;

		.inpIcon {
			width: 35rpx;
			height: 30rpx;
			margin-left: 15rpx;
		}
	}

	.leftRightBtn {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 30rpx 0rpx;

		.leftBtn {
			color: #FFFFFF;
			font-size: 24rpx;
			line-height: 24rpx;
		}
	}
}
</style>